<!--
 * @Author: hu_binbin
 * @Date: 2021-08-19 09:51:10
 * @LastEditTime: 2021-08-26 15:37:18
 * @Description: 隐患筛选
-->

<template>
    <div class="bg">
        <div class="title">筛选</div> 
        <div class="auto">
            <div class="row sub">
                <span>变电站名称</span>
                <div class="search">
                    <van-search v-model.trim="subName" clearable @input="focus" shape="round" background="#F5F6FA" placeholder="搜索变电站">
                    </van-search> 
                </div>
            </div>
            <div class="row">
                <span>隐患性质</span>
                <div class="cycle-time">
                    <div :class="{active:item.checked}" @click="workType(item)" v-for="(item,index) in hidden">{{item.name}}</div>
                </div>
            </div>
            <div class="row">
                <span>隐患状态</span>
                <div class="work-type">
                    <div :class="{active:item.checked}" @click="workType(item)" v-for="(item,index) in hiddenStatus" :key="index">{{item.name}}</div>
                </div>
            </div>
            <div class="row">
                <span>是否已治理</span>
                <div class="work-type">
                    <div :class="{active:item.checked}" @click="workType(item)" v-for="(item,index) in dealWay" :key="index">{{item.name}}</div>
                </div>
            </div>
            <div class="row">
                <span>登记时间</span>
                <div class="time">
                    <div @click="showStartTime = true">
                        <span>{{startTime}}</span>
                        <van-icon size="20" name="calendar-o" />
                    </div>
                    <div @click="showEndTime = true">
                        <span>{{endTime}}</span>
                        <van-icon size="20" name="calendar-o" />
                    </div>
                </div>
            </div>
        </div>
        <div class="btn">
            <van-button color="#17B49B" plain style="width: 45%;" type="primary" size="small">重置</van-button>
            <van-button color="#17B49B" style="width: 45%;" type="primary" size="small">完成</van-button>
        </div>
        <!-- 时间类型选择器 -->
		<van-popup round close-on-click-overlay v-model="showStartTime" position="bottom" @close="showStartTime=false">
			<van-datetime-picker v-model="currentStaDate" title="选择开始时间" @confirm="onStartConfirm" 
			:min-date="minDate"
			:formatter="formatter"
  			:max-date="maxDate"
			@cancel="showStartTime=false" type="date">
			</van-datetime-picker>
        </van-popup>
        <!-- 时间类型选择器 -->
		<van-popup round close-on-click-overlay v-model="showEndTime" position="bottom" @close="showEndTime=false">
			<van-datetime-picker v-model="currentEndDate" title="选择结束时间" @confirm="onEndConfirm" 
			:min-date="minDate"
			:formatter="formatter"
  			:max-date="maxDate"
			@cancel="showEndTime=false" type="date">
			</van-datetime-picker>
        </van-popup>
    </div>
</template>

<script>
import Util from "@/utils/util"
export default {
name:"screen",
props: {
},
data() {
    return {
        subName: "",
        showStartTime:false,
        showEndTime:false,
        currentStaDate:new Date(),
        currentEndDate:new Date(),
        minDate: new Date(new Date().getFullYear()-2,new Date().getMonth()+1,new Date().getDay()),
        maxDate: new Date(new Date().getFullYear()+2,new Date().getMonth()+1,new Date().getDay()),
        startTime: "",
        endTime: "",
        icon: {
            
        },
        hidden:[
            {
                checked: false,
                name:"全部",
            },
            {
                checked: false,
                name:"一般隐患",
            },
            {
                checked: false,
                name:"重点隐患",
            },
            {
                checked: false,
                name:"安全事件",
            },
        ],
        hiddenStatus:[
            {
                checked: false,
                name:"全部",
            },
            {
                checked: false,
                name:"登记隐患",
            },
            {
                checked: false,
                name:"班组审核",
            },
            {
                checked: false,
                name:"预评估定级",
            },
            {
                checked: false,
                name:"专业定级",
            },
            {
                checked: false,
                name:"隐患处理",
            },
            {
                checked: false,
                name:"隐患验收",
            },
        ],
        dealWay:[
            {
                checked: false,
                name:"全部",
            },
            {
                checked: false,
                name:"未治理",
            },
            {
                checked: false,
                name:"已治理",
            },
        ],
    }
},
methods: {
    openTime() {

    },
    focus() {

    },
    workType(item) {
        //this.$set(item, "checked", !item.checked)
        //this.dateTime = JSON.parse(JSON.stringify(this.dateTime))
        item.checked = !item.checked;
    },
    /**
     * @description: 开始时间回调
     * @param {*}
     * @return {*}
     */
    onStartConfirm(val) {
        this.showStartTime = false;
        this.startTime = Util.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd')
    },
    /**
     * @description: 结束时间回调
     * @param {*}
     * @return {*}
     */
    onEndConfirm(val) {
        this.showEndTime = false;
        this.endTime = Util.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd')
    },
    //日期格式
    formatter(type, val) {
        if (type === 'year') {
            return val + '年';
        }
        if (type === 'month') {
            return val + '月';
        }
        if (type === 'day') {
            return val + '日';
        }
        if (type === 'hour') {
            return val + '时';
        }
        if (type === 'minute') {
            return val + '分';
        }
        return val;
    },
},
};
</script>

<style scoped>
    .bg{
        font-size: 15px; 
        color: #333;
    }
    .title{
        text-align: center;
        margin: 1rem 0.5rem;
        font-size: 15px;
        color: #333;
    }
    .row{
        margin: 10px;
        color: #333;
        font-size: 15px;
    }
    .search{
        margin-top: 10px;
    }
    .cycle-time,.work-type{
        margin: 0.5rem 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .cycle-time div{
        color: #666;
        width: 25%;
        padding: 0.5rem 0.3rem;
        margin: 0.3rem;
        background: #F0F0F0;
        text-align: center;
        font-size: 13px;
    }
    .work-type div{
        width: 25%;
        padding: 0.5rem 0.3rem;
        margin: 0.3rem;
        background: #F0F0F0;
        text-align: center;
        font-size: 13px;
        color: #666;
    }
    .time{
        display: flex;
        align-items: center;
        margin: 0.5rem 0;
        justify-content: space-between;
    }
    .time div{
        width: 45%;
        margin: 0.3rem 0.3rem;
        padding: 0.5rem 0.3rem;
        background: #F0F0F0;
        display: flex;
        align-self: center;
        justify-content: space-between;
        color: #666;
    }
    .btn{
        bottom: 0px;
        margin:0.5rem;
        width: calc(100% - 1rem);
        position: fixed;
        display: flex;
        justify-content:space-around;
    }
    /deep/ .van-search {
        height: 30px;
    }
    .active{
        color:#1BB59A !important;
    }
    .auto{
        overflow-y: auto;
        height: calc(100% - 9rem);
    }
</style>